<script setup lang="ts">
import { postLoginWxMinAPI } from '@/services/login'
import { ref } from 'vue'

const checkboxValue = ref(false)

const checkboxChange = () => {
  checkboxValue.value = !checkboxValue.value
}

const register = () => {
  uni.showToast({
    title: '请使用手机号快捷登录',
    icon: 'none',
  })
}

// 处理获取手机号的逻辑
const getPhoneNumber = (e: any) => {
  checkboxValue.value = true
  if (e.detail.errMsg === 'getPhoneNumber:ok') {
    const { encryptedData, iv } = e.detail

    // uni.setStorageSync('userInfo', { id: '1', token: 'fsdfsdfsdfdfg' })
    // uni.switchTab({ url: '/pages/index/index' })

    // 发送请求到后端, 处理用户信息
    uni.login({
      provider: 'weixin',
      success: async (loginRes) => {
        if (loginRes.code) {
          const code = loginRes.code
          const res: any = await postLoginWxMinAPI({
            code,
            encryptedData,
            iv,
          })
          uni.setStorageSync('userInfo', res.data)
          uni.showToast({
            title: '登录成功',
            icon: 'none',
          })
          uni.switchTab({ url: '/pages/index/index' })
        }
      },
    })
  } else {
    uni.showToast({
      title: '请授权',
      icon: 'none',
    })
  }
}

// 先逛逛 游客登录
const visitorLogin = () => {
  uni.switchTab({
    url: '/pages/index/index',
  })
}

// 注册按钮可以调用快捷登录，但由于微信小程序官方的限制，getPhoneNumber目前只能
// <button id="login_btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
// 使用这种方式触发
const registe = () => {
  uni.showToast({
    title: '请使用快捷登录',
    icon: 'none',
  })
}
</script>

<template>
  <view class="login-container">
    <image class="background" src="/static/login/login.png" mode="aspectFill"></image>
    <!-- 登录按钮 -->
    <view class="login-view">
      <button class="login-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
        手机号快捷登录
      </button>
      <view class="register">
        <span class="text-left" @click="register">没有账号，点击注册</span>
        <span class="text-right" @click="visitorLogin">先逛逛</span>
      </view>
    </view>
    <!-- 隐私政策 -->
    <view class="privacy-policy">
      <checkbox-group class="checkbox-group" @change="checkboxChange">
        <label>
          <checkbox class="checkbox" :checked="checkboxValue" />
        </label>
      </checkbox-group>
      <span class="policy-text">登录即表示同意</span>
      <span class="policy-link">用户服务协议</span>
      <span class="policy-text-center">和</span>
      <span class="policy-link">个人隐私条款</span>
    </view>
  </view>
</template>

<style scoped lang="scss">
.login-container {
  height: 100%;

  .background {
    width: 100%;
    height: 100%;
    position: fixed;
    background-size: 100% 100%;
    z-index: -1;
  }

  .login-view {
    position: fixed;
    top: 70vh;
    margin: 0 auto;
    width: 100%;
    height: 18vh;
    padding: 0 5vw;

    .login-btn {
      width: 100%;
      height: 8vh;
      font-size: 4vw;
      line-height: 8vh;
      background: #967bb6;
      color: #fff;
      border-radius: 50px;
    }

    .register {
      padding: 0 5vw;
      margin-top: 2vh;
      display: flex;
      justify-content: space-between;

      .text-left,
      .text-right {
        color: #4a4a4a;
        font-size: 4vw;
      }
    }
  }

  .privacy-policy {
    position: fixed;
    bottom: 5vh;
    margin: 0 auto;
    width: 100%;
    height: 8vh;
    padding: 0 5vw;
    line-height: 8vh;
    display: flex;
    align-items: center;

    .checkbox-group {
      width: 4vw;
      margin-right: 2vw;

      label {
        .checkbox {
          transform: scale(0.7);
        }
      }
    }

    .policy-text,
    .policy-text-center,
    .policy-link {
      font-size: 3.5vw;
      color: #4a4a4a;
      margin-left: 13rpx;
    }

    .policy-link {
      font-weight: bold;
    }
  }

  @media (min-width: 768px) {
    .login-view {
      top: 70vh;
      height: 20vh;
      padding: 0 7vw;

      .login-btn {
        height: 7vh;
        font-size: 3vw;
        line-height: 7vh;
      }

      .register {
        padding: 0 7vw;

        .text-left,
        .text-right {
          font-size: 3vw;
        }
      }
    }

    .privacy-policy {
      height: 10vh;
      padding: 0 7vw;
      line-height: 10vh;

      .policy-text,
      .policy-text-center,
      .policy-link {
        font-size: 3vw;
      }

      .checkbox-group {
        width: 5vw;

        .checkbox {
          transform: scale(0.8);
        }
      }
    }
  }
}
</style>
